<template>
  <div v-if="showContactWay">
    <div class="back-ground"></div>
    <div class="show-contact-way">
      <div class="header-direction">
        <div class="header-auto">
          <span><img src="../assets/picture/remind-icon.png" width="32" height="32"></span>
          <p>{{directionOperate}}</p>
        </div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default{
    name: 'model',
    data () {
      return {
        showContactWay: false,
        directionOperate: ''
      }
    },
    mounted: function () {
      var that = this
      this.$eventHub.$on('contactWay', (msg) => {
        that.showContactWay = true
        that.directionOperate = msg
      })
    },
    methods: {
      hideContactWay () {
        this.showContactWay = false
      }
    }
  }
</script>

<style scope lang="scss">
  .back-ground {
    position: fixed;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    top: 0;
    background: #000000;
    opacity: 0.2;
    z-index: 998;
  }
  .show-contact-way{
    width: calc(100% - 50px);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: #ffffff;
    .header-direction{
      display: block;
      height: 44px;
      background: #f5f5f5;
      .header-auto{
        display: table;
        margin: 0 auto;
        span{
        display: table-cell;
        vertical-align: middle;
          img{
            display: inherit;
            vertical-align: middle;
          }
        }
        p{
          float: left;
          margin-left: 9px;
          font-size: 16px;
          color: #444444;
          line-height: 44px;
        }
      }
    }
    .wechar-way{
      .we-char{
        display: table;
        margin: 10px auto;
        img{
          display: inherit;
        }
      }
      p{
        width: calc(100% - 50px);
        margin: 0 auto 15px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 16px;
        border: 1px solid #bbbbbb;
        border-radius: 3px;
        color: #444444;
      }
    }
    .phone-way{
      p.phone-number{
        text-align: center;
        margin: 28px 0 26px;
        font-size: 18px;
        color: #444444;
        line-height: 18px;
      }
      p.play-operate{
        text-align: center;
        margin-bottom: 15px;
        span, a{
          font-size: 16px;
          display: inline-block;
          height: 44px;
          width: 135px;
          text-align: center;
          line-height: 44px;
          border-radius: 3px;
        }
        span{
          color: #444444;
          border: 1px solid #bbbbbb;
          margin-right: 5px;
        }
        a{
          color: #ffffff;
          background: #e92d46;
        }
      }
    }
  }
</style>
